<template>
	<view class="content" :style="{'--color':color}">
		<status-bar title='赠送记录'></status-bar>
		
		<block v-for="(item,index) in pageData" :key="index">
			<view class="viewbox auto p-top20 p-left20 p-bot30 bgwhite m-top20 bor_radius_10" 
			    @click="toUrl('process?ids='+item.id+'&keycode='+item.keycode)">
				<view class="rows d-flex bot_bor p-bot20">
					<view class="product_Img p-re f-shrink-0 f-gorw0">
						<image :src="imgUrl+item.pdtimg" mode="aspectFill" class="wh"></image>
						<view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{item.id}}</view>
					</view>
					<view class="d-flex f-column f-gorw1 m-left20 p-right8">
						<text class="color_33 size30 ellipsis_2 ">{{item.pdtname}}</text>
						<view class="d-flex a-center m-top20">
							<text class="h6 bold m-right20" :style="{color:color}">您</text>
							<text class="size30 color_33 bold m-right20 f-shrink-0">送给了</text>
							<view class="headimg m-right20 f-shrink-0"><image :src="item.acceptImg" mode="aspectFill" class="wh bor_radius"></image></view>
							<text class="color_80 h6">{{item.acceptName}}</text>
						</view>
					</view>
				</view>
				<view class="row color_80 size30 m-top10">赠送时间：{{item.acceptDate}}</view>
			</view>
		</block>
		
	
		
		<empty v-if='noData' type='1' cat='3' msg='还没有相关数据哦~'></empty>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				imgUrl:this.imgUrl,
				
				noData:false,
			
				page:1,
				limit:20,
				pageData:[],
				getmore:true,
			}
		},
		onShow() {
			let that = this;
			that.getMyGiveList();
		},
		methods: {
			getMyGiveList(){
				let that = this;
				uni.showLoading({title:'加载中~'})
				that.$http.post({
					url:'/singleSaleWarehouseApi/getMyGiveList',
					data:{
						page:that.page,
						limit:that.limit
					}
				}).then(res=>{
					uni.hideLoading();
					if(res.errcode == '100'){
						 if(that.page == 1){
							 if(res.data){
								  that.noData = false;
								  that.pageData = res.data;
							 }else{
								 that.noData = true;
							 }	
						 }else{
							 if(res.data){
								  that.pageData = that.pageData.concat(res.data);
							 }else{
							 	 that.getmore = false;
							 }	
						 }
					}else{
						uni.showToast({title: res.msg,icon: 'none'})
					}
				})
			},
		},
		computed:{
			...mapState(['color','vid','bid']),
		},
		onReachBottom() {
			let that = this;
			if(that.getmore){
				that.page ++;
				that.getMyGiveList();
			}
		},
	}
</script>

<style lang="scss">
	page{
		background: #f7f9fa;
	}
	.product_Img{
		width:140rpx;
		height: 140rpx;
	}
	.numId{
		position: absolute;
		right:0;top:0;
		background: var(--color);
		border-radius: 0 10rpx 0 10rpx;
	}
	.headimg{
		width:60rpx;
		height: 60rpx;
		border:4rpx solid var(--color);
		border-radius: 50%;
		-webkit-border-radius: 50%;
	}
</style>
